<template>
  <div id="chinaChart" class="w-full min-w-500 h-540"></div>
</template>

<script setup lang="ts">
import { nextTick, onMounted } from 'vue';
import { getMapByCode } from '@/utils/map-json';
import * as echarts from 'echarts';

const props= defineProps({
  flowId: { type: String, required: false, default: null },
  dataSource: { type: Array, required: true, default: [] }
});

watch(
  () => [props.dataSource],
  () => {
    if(props.dataSource) {
      initMap(props.dataSource);
    }
  },
  { deep: true }
);

// onMounted(() => {
//   initMap();
// });

let myChart;

const initMap = async (data: any[]) => {
  await nextTick();
  const geoJson = (await getMapByCode()) || {};
  const hostEl = document.getElementById('chinaChart');
  if (!hostEl) {
    return;
  }
  myChart = echarts.init(hostEl);
  myChart && myChart.on('click', (params) => {
    console.log("🚀 ~ myChart&&myChart.on ~ params:", params)
  })
  myChart.hideLoading();
  echarts.registerMap('china', geoJson);
  const option = {
    title: {
      text: '',
      subtext: '',
      sublink: ''
    },
    tooltip: {
      trigger: 'item',
      formatter: (params: { data: {name: string, value: number | string}; }) => {
        const data = params.data || {}
        const name = data.name || ``
        const value = data.value || 0
        const htmlStr = `<div class="map-tooltip-root"><div class="title">${name}</div><div class="item"> <span class="item-title">总进件数：</span><span class="item-value">${value}</span></div></div>`
        return htmlStr
      }
    },
    toolbox: {
      show: false,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    geo: {
      show: true,
      silent: true,
      map: 'china',
      label: {
        show: false
      },
      roam: false,
      center: [105.194115019531, 36.582111640625],
      itemStyle: {
        normal: {
          areaColor: '#8ebdb8',
          borderWidth: 0, // 设置外层边框
          // borderColor: 'transparent', // '#8ebdb8' // '#377e71'
          // shadowColor: '#e1f8f6', // 省份边框阴影
          // shadowBlur: 5 // 省份边框聚焦
          shadowColor: '#75d1b1',

          shadowBlur: 30,

          // opacity: 0.8
        },
        emphasis: {
          show: false
        }
      }
    },
    visualMap: [
      {
        type: 'piecewise',
        left: 'center',
        bottom: '16',
        calculable: false,
        icon: 'circle',

        itemWidth: 12,
        itemHeight: 12,
        orient: 'horizontal',
        seriesIndex: 0,
        pieces: [
          {
            min: 1,
            max: 10,
            label: '1-10家'
          },
          {
            min: 11,
            max: 20,
            label: '11-20家'
          },
          {
            min: 21,
            max: 30,
            label: '21-30家'
          },
          {
            min: 31,
            max: 40,
            label: '31-40家'
          },
          {
            min: 41,
            max: 50,
            label: '41-50家'
          },
          {
            min: 41,
            max: 50000,
            label: '超过50家'
          }
        ],
        inRange: {
          color: ['#B6F0E6', '#008071'],
          symbolSize: [10, 100]
        }
      }
    ],
    series: [
      {
        name: '',
        type: 'map',
        map: 'china',
        center: [105.194115019531, 35.582111640625],
        // center: [105.194115019531, 36.582111640625],
        areaColor: '#c2eee6',
        itemStyle: {
          // 地图的样式
          normal: {
            borderColor: '#8ebdb8', // 省份边框颜色
            borderWidth: 0.2, // 省份边框宽度
            shadowColor: '#c2eee6' // 省份边框阴影
            // shadowBlur: 5 // 省份边框聚焦
          },
          emphasis: {
            disabled: true,
            areaColor: '#c2eee6',
            borderColor: '#fff',
            borderWidth: 4,
            // shadowColor: '#A0A2A5',
            // shadowOffsetX: 5, //不同轴上的阴影
            shadowOffsetY: 10 // 体现凹凸效果
          }
        },
        label: {
          show: false
        },
        data: data.map((item: any) => {
          return {
            name: item.province,
            value: item.total
          }
        })
      }
    ]
  };
  myChart.setOption(option);
  myChart.on('mouseover', (param) => {
    if (param) {
      // TODO
    }
  });
};
</script>
